"use client";
/*
 * @Author: hongbin
 * @Date: 2025-04-30 19:20:29
 * @LastEditors: hongbin
 * @LastEditTime: 2025-05-01 17:14:39
 * @Description:
 */
import { FC, useEffect, useRef, useState } from "react";
import { styled } from "styled-components";
import * as ECharts from "echarts";

interface IProps {
    data: number[];
    color?: string;
    axisLabelColor?: string;
}

/** 柱状图 */
const BarRowChart: FC<IProps> = ({
    data = [39, 47, 40, 84, 35, 90, 71],
    color = "#00FDFB",
    axisLabelColor = "#ccc",
}) => {
    const divRef = useRef<HTMLDivElement>(null);
    const ChartRef = useRef<ECharts.ECharts>(null);
    // const [data, setData] = useState([39, 47, 40, 84, 35, 90, 71]);
    const fontSize = 12;
    const offset = 2;

    useEffect(() => {
        if (divRef.current) {
            const chart = ECharts.init(divRef.current);

            ChartRef.current = chart;

            // const data = [39, 47, 40, 84, 35, 90, 71];
            const categories = ["A", "B", "C", "D", "E", "F", "G"];
            // 最大值为100时 如下 增加 下方空隙 + 上方label
            // 决定背景边框和内容高度差 正常情况 数值label为最大值时在边框外部
            const maxBarValue = 100 + offset * 2 + 20;

            const option = {
                backgroundColor: "transparent",
                yAxis: {
                    type: "category",
                    data: categories,
                    axisLine: { lineStyle: { color: "transparent" } },
                    axisLabel: {
                        color: axisLabelColor || "#ccc",
                        fontSize: fontSize,
                    },
                },
                xAxis: {
                    show: false,
                    max: maxBarValue + offset + 10,
                },
                grid: {
                    left: "16px",
                    right: "5%",
                    bottom: "5%",
                    top: "5%",
                },
                series: [
                    // 金色背景柱
                    {
                        type: "bar",
                        data: Array(data.length).fill(maxBarValue),
                        barWidth: "60%",
                        itemStyle: {
                            color: "#453B4C22",
                            borderColor: "#453B4C",
                            borderWidth: 1,
                        },
                        z: 1,
                    },
                    // 占位透明柱（用于悬空红柱）
                    {
                        type: "bar",
                        // data: Array(data.length).fill(offset),
                        data: data.map(v => ({
                            value: offset,
                            label: {
                                show: true,
                                position: "right",
                                color: color,
                                fontWeight: "bold",
                                fontSize: fontSize,
                                formatter: `${v}`,
                                fontFamily: "MyCustomFont",
                                fontStyle: "italic",
                                distance: 0,
                                offset: [300 - 80, 0],
                            },
                        })),
                        stack: "data",
                        barWidth: "30%",
                        itemStyle: {
                            color: "transparent",
                        },

                        z: 2,
                    },
                    // 红色柱子（真实数据）
                    {
                        type: "bar",
                        animationDuration: 1500,
                        animationEasing: "elasticOut",
                        data: data,
                        stack: "data",
                        barGap: "-75%",
                        itemStyle: {
                            color: color,

                            shadowColor: color,
                            shadowBlur: 5,
                            borderRadius: [2, 2, 2, 2],
                        },

                        z: 3,
                    },
                ],
            };

            chart.setOption(option);

            return () => {
                chart.dispose();
            };
        }
    }, []);

    useEffect(() => {
        if (ChartRef.current) {
            console.log("更新data", data);
            ChartRef.current.setOption({
                series: [
                    {},
                    {
                        data: data.map(v => ({
                            value: offset,
                            label: {
                                show: true,
                                position: "right",
                                color: color,
                                fontWeight: "bold",
                                fontSize: fontSize,
                                formatter: `${v}`,
                                fontFamily: "MyCustomFont",
                                fontStyle: "italic",
                                distance: 0,
                                offset: [280 - 80, 0],
                            },
                        })),
                    },
                    {
                        data,
                    },
                ],
            });
        }
    }, [data]);

    return <ChartWarp ref={divRef}></ChartWarp>;
};

export default BarRowChart;

const ChartWarp = styled.div`
    width: 280px;
    height: 200px;
`;
